<template>
	<view class="cart-bar uni-bg-color-grey">
		<view class="cart-top"><view class="cart-top-text uni-font-size-base">编辑</view></view>
		<view class="cart-list-bar uni-bg-color">
			<navigator hover-class='none' url="/pagesGoods/goods-details/goods-details" class="cart-item">
				<checkbox-bar :checked="true"></checkbox-bar>
				<image class="cart-item-img" src="../../../static/images/tem/gloos.jpg"></image>
				<view class="cart-item-info">
					<view class="cart-item-info-h1 uni-font-size-base">手机手机手机手机手机手机手机手机手机手机手机手机</view>
					<view class="cart-item-info-gg" @click.stop="onOpen"><view class="left">红色-43</view><icon-bar name='iconxiangxia' :size='20' class="icon"></icon-bar></view>
					<view class="cart-item-base">
						<view class="cart-item-base-l uni-font-size-base">￥330.22</view>
						<stepper-bar v-model="num"></stepper-bar>
					</view>
				</view>
			</navigator>
		</view>
		<view class="cart-none uni-bg-color">
			<not-data title='购物车是空的'>
				<buttom-bar title='去逛逛' :width="100" url='/pages/tabBar/index/index' open-type='switchTab'></buttom-bar>
			</not-data>
		</view>		
		<!-- footer -->
		<view class="cart-footer uni-bg-color uni-font-size-base">
			<view class="cart-footer-item cart-footer-left"><checkbox-bar :checked="true"></checkbox-bar>全选</view>
			<view class="cart-footer-item">
				<view class='cart-footer-item-bold'>合计：</view>
				<view class="uni-text-color-active">￥0.00</view>
			</view>
			<view class="cart-footer-item  cart-footer-right uni-bg-color-blue uni-text-color-inverse">去支付</view>
		</view>
		
		<!-- 商品规格选择弹窗 -->
		<uni-popup type='bottom' ref="popup">
			<goods-select></goods-select>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: 'Cart',
		title: '购物车',
		methods: {
			// 选择规格
			onOpen() {
				this.$refs.popup.open()
			},
		},
		data() {
			return {
				num: 50
			};
		}
	}
</script>

<style lang="scss">
	.cart-bar{
		width: 100%;
		.cart-top{
			width: 100%;
			height: 80upx;
			line-height: 80upx;
			padding:0 30upx;
			box-sizing: border-box;
			text-align: right;
			.cart-top-text{
				display: inline-block;
			}
		}
		.cart-list-bar{
			width: 100%;
			padding: 0 30upx;
			box-sizing: border-box;
			.cart-item{
				height: 200upx;
				display: flex;
				align-items: center;
				border-bottom: solid 3upx #eee;
				.cart-item-img{
					width: 160upx;
					height: 160upx;
					margin: 0 10upx;
				}
				.cart-item-info{
					width: 0;
					flex: 1;
					.cart-item-info-h1{
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.cart-item-info-gg{
						width: 150upx;
						margin-top: 20upx;
						background: #eee;
						padding: 5upx 10upx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						color: #999;
						font-size: 20upx;
						.left{
							flex: 1;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}
						.icon{
							margin-left: 30upx;
						}
					}
					.cart-item-base{
						margin-top: 20upx;
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
				}
			}
		}
		.cart-none{
			width: 100%;
			height: 320upx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
		}
		.cart-chechbox{
			width: 50upx;
			height: 50upx;
		}
		.cart-footer{
			width: 100%;
			height: 100upx;
			position: fixed;
			bottom: var(--window-bottom);
			left: 0;
			display: flex;
			align-items: center;
			.cart-footer-item{
				height: 100%;
				flex: 1;
				display: flex;
				align-items: center;
			}
			.cart-footer-left{
				padding-left: 30upx;
				box-sizing:border-box;
			}
			.cart-footer-item-bold{
				font-weight: bold;
			}
			.cart-footer-right{
				justify-content: center;
			}
		}
	}
</style>
